<template>
	<view class="apps">
		<view class="flex zindex-1">
			<video :src="mp4" object-fit="cover" :autoplay="true" :controls="false" :muted="true" :loop="true" id="videRef" class="video"></video>
		</view>
		
		<view class="flex fdc pd20 home" :style="{top:homeTop+'px'}">
			<view class="more">
				<view class="bag flex jcc air" @click="switchHomeTop">
					<uv-icon :name="switchHome" size="36rpx" color="#a82022"></uv-icon>
				</view>
			</view>
			<view class="flex bgwhite fdc br10">
				<view class="flex aic jcc">
					<text class="f14 red fweight6">融合</text><text class="f14 blue fweight6">体育</text><text class="f30">·</text><text class="f14 black fweight4">羽球馆</text>
				</view>
				<view class="flex plr20">
					<view class="flex f1 pr20 fdc">
						<view class="flex aic">
							<image :src="list[5]" class="yy"></image>
							<image :src="list[6]" class="ss"></image>
						</view>
						<view class="flex mt20">
							<image :src="list[1]" class="shop"  mode="widthFix" @click="handle('/pages/member/subscribe','nav',true)"></image>
							<image :src="list[4]" class="shop ml20"  mode="widthFix" @click="handle('/pages/order/index','nav',true)"></image>
						</view>
						
					</view>
					<view class="flex">
						<image :src="list[7]" mode="widthFix" class="yuyue" @click="handle('/pages/subscribe/subscribe','switch',false)" v-if="userInfo.group_id == 3"></image>
						<image :src="list[3]" mode="widthFix" class="yuyue" @click="handle('/pages/subscribe/subscribe','switch',false)" v-else></image>
					</view>
				</view>
			</view>
			<uv-notice-bar :text="text" direction="column" duration="3000" color="#666" bgColor="#fff"  @click="handleNotice"></uv-notice-bar>
			
			<view class="flex bgwhite mt30 ptb20 plr20">
				<image :src="list[0]" mode="widthFix" class="ding"></image>
				<view class="f1 ml10">
					<uv-parse :content="content" :tagStyle="style"></uv-parse>
				</view>
			</view>	
			<view class="bgwhite flex mt30 ptb20 plr20">
				<image :src="list[2]" class="order"  mode="widthFix" @click="handle('/pages/sale/sale','switch',false)"></image>
			</view>
			<view class="flex fdc mb20 ptb20 br10 bgwhite mt30">
				<view class="flex aic mb20">
					<uv-icon name="empty-address" size="30"></uv-icon>
					<div class="f1 f13 ztcolors plr20">哈密市伊州区红星·中奥体育公园</div>
					<uv-button type="error" :plain="true" text="导航" shape="circle" size="small" @click="openMap()"></uv-button>
				</view>
				<view class="flex aic mb20">
					<uv-icon name="phone-fill" size="30"></uv-icon>
					<div class="f1 f13 ztcolors plr20">客服电话</div>
					<uv-button type="error" :plain="true" text="呼叫" shape="circle" size="small" @click="openCall()"></uv-button>
				</view>
				<view class="flex aic mb20">
					<uv-icon name="server-man" size="30"></uv-icon>
					<div class="f1 f13 ztcolors plr20">在线客服</div>
					<uv-button type="error" :plain="true" open-type="contact" text="联系" shape="circle" size="small"></uv-button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { util } from '/common/util.js';
	import { getCurrentInstance , ref , reactive,nextTick  } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance();
	const { $onLaunched } = proxy;
	const switchHome = ref('arrow-up'),
		  mp4=ref("https://ball.lifecloud.top/static/rh.mp4"),
		  kfMobile=ref(''),
		  text =ref([]),
		  userInfo = ref({
			  group_id:0
		  }),
		  notice = ref([]),
		  content = ref(''),
		  homeTop =ref(215),
		  style=ref({
					'p':"font-size:28rpx;line-height:38rpx;",
					'img':'max-width:100%'
				}),
		  list = ref([
		  				'https://ball.lifecloud.top/static/d.jpg',
		  				'https://ball.lifecloud.top/static/my.jpg',
		  				'https://ball.lifecloud.top/static/shop.jpg',
		  				'https://ball.lifecloud.top/static/yuyue.jpg',
		  				'https://ball.lifecloud.top/static/order.jpg',
		  				'https://ball.lifecloud.top/static/yy.jpg',
		  				'https://ball.lifecloud.top/static/ss.jpg',
		  				'https://ball.lifecloud.top/static/qyuyue.jpg',
		  			]);
	const switchHomeTop = ()=>{
			if(switchHome.value == 'arrow-up'){
				homeTop.value = 100, switchHome.value = 'arrow-down'
			}else{
				homeTop.value = 215, switchHome.value = 'arrow-up'
			}
		  },openMap = () => {
			  uni.openLocation({
				latitude:42.78245,
				longitude:93.746664,
				name:'新疆融合体育中心',
				address:'哈密市伊州区红星·中奥体育公园',
				scale:14
			  })
		  },openCall = () =>{
				uni.makePhoneCall({
					phoneNumber: kfMobile.value,
					success:function(e){},
					fail:function(e){}
				})
		  },handleNotice = (index)=>{
			  const  noticeId = notice.value[index].id;
			  uni.navigateTo({
			  	url:'/pages/index/notice?id='+noticeId,
			  })
		  },handle = (page,type,is_login)=>{
				if(is_login){
					if(util.isLogin() == false){
						uni.setStorageSync('remount_url',JSON.stringify({page:page,type:type,login:is_login}));
						uni.navigateTo({
							url:'/pages/member/login',
						})
						return;
					}
				}
				if(type == 'nav'){
					uni.navigateTo({
						url: page,
					});
					return;
				}
				if(type== 'switch'){
					uni.switchTab({
						url:page
					})
					return;
				}
			},getConfig = async ()=>{
				const data = await util.request({
					url:'/mpwechat/config',
					data:{
						type:'kefu_mobile,reserve_instructions'
					},
				});
				if(data.code == '200'){
					kfMobile.value = data.data.kefu_mobile;
					content.value = data.data.reserve_instructions;
				}
			},getNotice = async ()=>{
				const data = await util.request({
					url:'/mpwechat/notice',
				});
				if(data.code == '200'){
					notice.value = data.data;
					text.value = data.data.map(item => item.title)
				}
			},getUserinfo = async()=> {
				let data =  await util.request({
						url:"/mpwechat/userinfo",
					});
				if(data.code == 200){
					userInfo.value = data.data;
				}
			}
	
	onLoad(async ()=>{
	    await $onLaunched;
		getNotice();
		getUserinfo();

	})
	onShow(()=>{
		getConfig();
		getUserinfo();
		nextTick().then(()=>{
			uni.createVideoContext('videoRef').play();
		})
	})
</script>

<style lang="scss" scoped>
	.apps{position: relative; background-image: linear-gradient(#f4f4fa 0, #f4f4fa 100%);}
	.video{width: 100% !important;}
	.zindex-1{z-index: 5;}
	.zindex-2{z-index: 10;}
	.home{position: absolute; width:100%;border-radius: 20rpx 20rpx 0 0; background-color: #f8f9ff; min-height: 840rpx;box-sizing: border-box; transform: top 1s ease;
		.more{ position: absolute; right:20rpx; top:-30rpx;  
			.bag{width: 80rpx;position: relative;height: 40rpx;}
			.bag::before{
				  content: '';
				    position: absolute;
				    top: 0;
				    left: 0;
				    right: 0;
				    bottom: 0;
				    background: #f8f9ff;
				    transform: perspective(40rpx) rotateX(15deg);
				    transform-origin: bottom;
				
			}
		}
	}
	.ding{width:40rpx;height:180rpx;}
	.address{background-color: #e8e8ff;}
	.shop{width:250rpx;height:125rpx; border-radius: 20rpx;}
	.yy{width:100rpx; height:100rpx;}
	.ss{width:320rpx; height:32rpx; margin-left:20rpx ;}
	.yuyue{width:130rpx;height:260rpx;border-radius: 20rpx;}
	.order{width: 100%; border-radius: 20rpx;}
</style>